<script setup lang="ts">
import SubBread from './components/sub-bread.vue'
import SubSort from './components/sub-sort.vue'
import SubFilter from './components/sub.filter.vue'
import CategoryItem from './components/category-item.vue'
import InfiniteLoading from '@/components/Infinite-loading/infinite-loading.vue'
import { findSubCategory } from '@/service/api/category'
import { findTemporary } from '@/service/api/goods'
import { useRoute } from 'vue-router'
import { computed, reactive, Ref, ref, watch } from 'vue'
import { IGoods, ISubCategory } from '@/service/api/type/category.type'
import { IOptions, SortOptions } from './type'
import { ITemporaryParams } from '@/service/api/type/goods.type'

const route = useRoute()
const subCategoryData: ISubCategory = reactive({
  id: '',
  name: '',
  picture: '',
  parentId: '',
  parentName: '',
  goods: [],
  categories: [],
  brands: [],
  saleProperties: []
})

const subBreadData = reactive({
  id: '',
  name: '',
  parentId: '',
  parentName: ''
})

const loaded = ref(false)
const getSubCategory = async (id: string) => {
  const response = await findSubCategory(id)

  Object.assign(subCategoryData, response.result)
  subBreadData.id = subCategoryData.id
  subBreadData.name = subCategoryData.name
  subBreadData.parentId = subCategoryData.parentId!
  subBreadData.parentName = subCategoryData.parentName!
}

const loading = ref(false)
const finished = ref(false)

const goodItemList: Ref<IGoods[]> = ref([])
const params: ITemporaryParams = reactive({
  categoryId: route.params.id as string,
  page: 1,
  pageSize: 10
})
let pages = 1

const getTemporaryData = async () => {
  if (params.page <= pages) {
    loading.value = true
    const { result } = await findTemporary(params)
    loading.value = false
    goodItemList.value.push(...result.items)
    params.page = result.page + 1
    pages = result.pages
  } else {
    finished.value = true
  }
}

const changeOptions = async (options: IOptions) => {
  Object.assign(params, options)
  resetData()
  getTemporaryData()
}

const checkOptions = (options: SortOptions) => {
  Object.assign(params, options)
  resetData()
  getTemporaryData()
}

const resetData = () => {
  pages = 1
  params.page = 1
  finished.value = false
}

watch(
  () => route.params.id,
  (id) => {
    if (route.path.includes('/category/sub')) {
      getSubCategory(id as string)
      resetData()
      getTemporaryData()
    }
  },
  {
    immediate: true
  }
)
</script>

<template>
  <div class="sub">
    <div class="container">
      <SubBread :sub-bread-data="subBreadData"></SubBread>
      <SubFilter
        :sub-category-data="subCategoryData"
        :loaded="loaded"
        @checked-options="changeOptions"
      ></SubFilter>
      <div class="goods-list">
        <SubSort @check-options="checkOptions"></SubSort>
        <ul>
          <template v-if="goodItemList.length">
            <li v-for="item in goodItemList" :key="item.id">
              <CategoryItem :good="item"></CategoryItem></li
          ></template>
          <template v-else>
            <li class="none">
              <img src="/src/assets/images/none.png" />
              <span>亲，暂无商品~</span>
            </li>
          </template>
        </ul>
      </div>
      <InfiniteLoading
        :loading="loading"
        :finished="finished"
        @infinite="getTemporaryData"
      ></InfiniteLoading>
    </div>
  </div>
</template>

<style lang="less" scoped>
.goods-list {
  background: #fff;
  padding: 0 25px;
  margin-top: 25px;
  ul {
    display: flex;
    flex-wrap: wrap;
    padding: 0 5px;
    li {
      margin-right: 20px;
      margin-bottom: 20px;
      &:nth-child(5n) {
        margin-right: 0;
      }
    }
    .none {
      display: flex;
      align-items: center;
      flex-direction: column;
      width: 100%;
      height: 400px;
      color: #999;
      img {
        width: 200px;
        height: 134px;
      }
    }
  }
}
</style>
